#include ("/_includes/_layout.html")
#define css()
<style>
.dt-loading {color:#777; display: inline-block; margin-left: 5px;}
#dependencyTreeViewer {background: #fff; overflow:visible !important; height: auto !important; max-height: auto !important;}
.dt-buttons {text-align: right;}
.dt-buttons a {display: inline;}
.jstree-anchor > label > span > i {color: gray;font-size: 10px;}
.jstree-icon {color: darkseagreen;}
.indicators {display:inline-block; margin-left: 10px;}
.indicator{display: inline;position: relative;color:green;}
.indicator:hover:after{
    background: #333;
    background: rgba(0,0,0,.8);
    border-radius: 5px;
    top: 20px;
    color: #fff;
    content: attr(title);
    left: 20%;
    padding: 5px 15px;
    position: absolute;
    z-index: 98;
    min-width: 50px;
    max-width: 500px;
    width: auto;
    word-wrap: break-word;
}
.indicator-red {color: red;}
.indicator-lightgreen {color: darkseagreen;}
a.gray, a.gray:hover {color:gray !important;}
a.properties, a.properties:hover {font-style: italic; color:gray !important; }
#dependencyTreeExport .fa-stack-1x:before { margin-left: 5px; }
.jstree-open > .jstree-anchor > .fa-folder:before {
    content: "\f07c";
}
.jstree-default .jstree-icon.none {
    width: 0;
}
</style>
#end
#@layout("员工管理", "wxmall,点步科技", "Wxmall社区","wxmall") 
#define content()
<div class="wrapper wrapper-content">
	<div class="row content-tabs">
		<nav class="page-tabs J_menuTabs">
	       <div class="page-tabs-content" style="margin-left: 0px;">
	           <a href="#(webctx)/department" class="J_menuTab active">员工管理</a>
	           <a href="#(webctx)/role" class="J_menuTab">角色权限</a>
	       </div>
	   	</nav>
	</div>
    <div class="content row ibox-content">
	    <form id="employeeForm" method="POST" class="form-horizontal ibox-content">
	    	<input type="hidden" id="employeeId" name="id" value="#(employee.id??)"/>
            <div class="form-group">
                <span class="col-sm-2 control-label">登陆账号<i class="fa fa-question-circle" onmouseout="layer.closeAll();" onmouseover="layer.tips('输入用户注册的手机号，如用户使用微信扫码登录，需要先绑定手机号才能添加成为员工。', this, {tips: [1, '#3595CC'],time: 0});"></i></span>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="phone" value="#(employee.phone??)" #if(employee??) readonly="readonly" #end style="width: 160px;" onkeyup="this.value=this.value.replace(/\D/g,'')" />
                    <span class="alert-success">
                    	<p>输入用户注册的手机号，如用户使用第三方授权登录，需要先绑定手机号才能添加成为员工。</p>
                    </span>
                </div>
            </div>
            <div class="form-group">
                <span class="col-sm-2 control-label">姓名</span>
                <div class="col-sm-4">
                    <input type="text" class="form-control" name="emplName" value="#(employee.emplName??)" style="width: 160px;"/>
                </div>
            </div>
            #if(employee??)
            <div class="form-group">
               <span class="col-sm-2 control-label">状态</span>
               <div class="col-sm-4">
                   <select id="active_sel" name="active" class="form-control" style="width: 120px;">
	                	<option value="0" #if(employee && employee.active ==false) selected="selected" #end>删除</option>
	                	<option value="1" #if(employee== null || employee.active ==true) selected="selected" #end>启用</option>
	                </select>
               </div>
           </div>
           #end
            <div class="form-group">
                <span class="col-sm-2 control-label">角色</span>
                <div class="col-sm-4">
                    <select id="role_sel" class="form-control" name="roleId" style="width: 120px;">
                    	#for(role : roles)
                    		<option value="#(role.id)" #if(employee?? && employee.roleId ==role.id) selected="selected" #end>#(role.name) #if(role.isSystem==true) <font color='red'>(官)</font> #end</option>
                    	#end
	                </select>
                </div>
            </div>
            <div class="form-group">
               <span class="col-sm-2 control-label">角色权限</span>
               <div class="col-sm-6">
                   <div id="dependencyTreeViewer"></div>
               </div>
           </div>
            <div class="form-group">
                <div class="col-sm-8 col-sm-offset-2">
                    <button class="btn btn-primary btn-sm" type="submit">保存</button>
                    <a href="#(webctx)/employee" class="btn btn-white btn-sm" type="reset">取消</a>
                </div>
            </div>
        </form>
	</div>
</div>
#end
<script type="text/javascript">
$().ready(function() {
	var roleId = $("#role_sel").val();
	if(roleId != null && roleId !=""){
		$('#dependencyTreeViewer').jstree({
	        'core': {
	            'data' : {
					'url' : '#(webctx)/menu/listread',
					'data' : function (node) {
						return { 'id' : node.id == "#" ? null : node.id, roleId : roleId};
					}
				}
	        }
			,'plugins' : ['dnd', 'types', "checkbox"]
	    }).on('activate_node.jstree', function (e, data) {
		}).on('hover_node.jstree', function (e, data) {
	    });	
	}
	
	
	$("#role_sel").change(function(){
		roleId = $("#role_sel").val();
		if(roleId == null || roleId == ""){
			$('#dependencyTreeViewer').jstree("destroy");
			return;
		}
		$('#dependencyTreeViewer').jstree("destroy");
		$('#dependencyTreeViewer').jstree({
	        'core': {
	            'data' : {
					'url' : '#(webctx)/menu/listread',
					'data' : function (node) {
						return { 'id' : node.id == "#" ? null : node.id, roleId : roleId};
					}
				}
	        }
			,'plugins' : ['dnd', 'types', "checkbox"]
	    }).on('activate_node.jstree', function (e, data) {
		}).on('hover_node.jstree', function (e, data) {
	    });
	});
	
	$(".col-md-5 ul>li").hover(function(){
		$(this).find("a").removeClass("hide");
	   $(this).find("a").addClass("hover");
	},function(){
		 $(this).find("a").addClass("hide");  
		 $(this).find("a").removeClass("hover");
	});
	
	// validate signup form on keyup and submit
	var icon = "<i class='fa fa-times-circle'></i> ";
    $("#employeeForm").validate({
    	//debug:true,
    	errorElement: "em",
        success: function(em) {
            em.text("").addClass("success");//验证通过的动态CSS
        },
        submitHandler:function() {
        	$("#employeeForm").mask("正在保存...");
        	var params = $("#employeeForm").serializeJSON();
        	obz.ajaxJson(obz.ctx+"/employee/save", params, function(json) {
        		$("#employeeForm").unmask();
    			if(json.code!=200){
    				obz.error(json.msg);
    			}else{
    				obz.msg('保存成功', function(){
    					location.href = "#(webctx)/employee";
    				});					
    			}
    		});
        },
        rules: {
        	phone: "required", emplName: "required", roleId: "required"
        },
        messages: {
        	phone: icon + "请输入登陆账号", emplName: icon + "请输入员工姓名", roleId: icon + "请选择角色"
        }
    });
});
</script>